<template>
  <div class="page-wrap">
    <a-card title="职位管理" :bordered="false">
      <template #extra>
        <a-space>
          <a-input v-model="query.positionName" placeholder="职位名称" allow-clear style="width: 180px" />
          <a-input v-model="query.positionLevel" placeholder="职位级别" allow-clear style="width: 160px" />
          <a-button type="primary" @click="fetchList">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
          <a-button type="primary" status="success" @click="openEdit()">新增</a-button>
        </a-space>
      </template>

      <a-table
        row-key="positionId"
        :data="rows"
        :loading="loading"
        :pagination="pagination"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <a-table-column title="ID" data-index="positionId" width="120" />
        <a-table-column title="职位名称" data-index="positionName" />
        <a-table-column title="级别" data-index="positionLevel" />
        <a-table-column title="排序" data-index="sort" width="100" />
        <a-table-column title="备注" data-index="remark" />
        <a-table-column title="操作" :width="200">
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" @click="openEdit(record)">编辑</a-button>
              <a-popconfirm content="确认删除该职位？" @ok="onDelete(record)">
                <a-button type="text" status="danger">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </a-table>
    </a-card>

    <a-modal v-model:visible="editVisible" :title="editing?.positionId ? '编辑职位' : '新增职位'" :mask-closable="false" @ok="savePost" :confirm-loading="saving">
      <a-form :model="editing" layout="vertical">
        <a-form-item field="positionName" label="职位名称" :rules="[{ required: true, message: '请输入职位名称' }]">
          <a-input v-model="editing.positionName" />
        </a-form-item>
        <a-form-item field="positionLevel" label="职位级别">
          <a-input v-model="editing.positionLevel" />
        </a-form-item>
        <a-form-item field="sort" label="排序">
          <a-input-number v-model="(editing as any).sort" :min="0" />
        </a-form-item>
        <a-form-item field="remark" label="备注">
          <a-textarea v-model="(editing as any).remark" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import type { PageResult } from '@/types/common';
import type { PostEntity } from '@/api/system';
import { postList, postAdd, postUpdate, postDelete } from '@/api/system';

const query = reactive<{ positionName?: string; positionLevel?: string; pageNo: number; pageSize: number }>({
  positionName: '',
  positionLevel: '',
  pageNo: 1,
  pageSize: 10,
});

const loading = ref(false);
const rows = ref<PostEntity[]>([]);
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
});

function onPageChange(p: number) {
  pagination.current = p;
  query.pageNo = p;
  fetchList();
}
function onPageSizeChange(ps: number) {
  pagination.pageSize = ps;
  query.pageSize = ps;
  fetchList();
}

async function fetchList() {
  loading.value = true;
  try {
    const res = await postList(query as any);
    const pr = res.data as PageResult<PostEntity>;
    rows.value = pr?.records || [];
    pagination.total = pr?.total || 0;
  } finally {
    loading.value = false;
  }
}
function resetQuery() {
  query.positionName = '';
  query.positionLevel = '';
  query.pageNo = 1;
  pagination.current = 1;
  fetchList();
}

const editVisible = ref(false);
const saving = ref(false);
const editing = reactive<Partial<PostEntity & { sort?: number; remark?: string }>>({});

function openEdit(row?: PostEntity) {
  editVisible.value = true;
  Object.assign(editing, { positionId: undefined, positionName: '', positionLevel: '', sort: 0, remark: '' });
  if ((row as any)?.positionId) Object.assign(editing, row);
}
async function savePost() {
  saving.value = true;
  try {
    if ((editing as any).positionId) {
      await postUpdate(editing as any);
      Message.success('已保存');
    } else {
      await postAdd(editing as any);
      Message.success('已新增');
    }
    editVisible.value = false;
    fetchList();
  } finally {
    saving.value = false;
  }
}

async function onDelete(row: PostEntity) {
  await postDelete([ (row as any).positionId ]);
  Message.success('已删除');
  fetchList();
}

onMounted(fetchList);
</script>

<style scoped>
.page-wrap { padding: 12px; }
</style>